<template>
  <div class="item-info">
    <div class="item-icon">
      <img :src="good.img" alt />
      <div class="spell-tip" v-if="info && info.is_spell">拼团</div>
    </div>
    <div class="item-detail">
      <div class="left">
        <div class="title">{{ good.name }}</div>
        <div class="type">规格：{{ good.spec }}</div>
        <div
          class="desc"
          style="color: #3376F6; white-space: nowrap; margin-top: 0.5rem"
          v-if="info && info.active_end_time"
        >
          <span v-if="info && info.active_team_status === 3">还差{{ info.remain_people }}人,</span>
          <span v-if="info && info.active_team_status === 3">{{updateTime}}</span>
          <span
            v-if="info && info.active_team_status !== 0"
          >{{info.active_team_status === 1 ? '拼团成功' : info.active_team_status === 2 ? '拼团失败' : '拼团中'}}</span>
        </div>
      </div>
      <div class="price_number">
        <div class="price">￥{{ good.price }}</div>
        <div class="number">x{{ good.number }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
		good: {
			type: Object,
			default: () => {}
		},
		info: {
			type: Object,
			default: () => {}
		}
	},
  created() {
		
    if (this.info && this.info.hasOwnProperty("active_end_time")) {
      this.calcuRaminTime(this.info.active_end_time);
      this.timer = setInterval(() => {
        this.calcuRaminTime(this.info.active_end_time);
      }, 1000);
    }
  },
  data() {
    return {
      updateTime: ""
    };
  },
  methods: {
    calcuRaminTime(end) {
      let hour, minute, second;
      if (end) {
        let start = new Date().getTime() / 1000;
        let duration = end - start;
        if (duration <= 0) {
          this.updateTime = "拼团已结束";
          return;
        }
        hour = Math.floor((duration % (3600 * 24)) / 3600);
        minute = Math.floor(((duration % (3600 * 24)) % 3600) / 60);
        second = Math.floor(((duration % (3600 * 24)) % 3600) % 60);
        this.updateTime = "剩余时间:" + hour + ":" + minute + ":" + second;
      }
    }
  },
  destroyed() {
    this.timer && clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
.item-info {
  padding: 0.48rem;
  display: flex;
  font-size: 0.56rem;

  .item-icon {
    width: 3.36rem;
    height: 3.36rem;
    margin-right: 0.48rem;
    background: #dfdfdf;
    overflow: hidden;
    border-radius: 0.12rem;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .spell-tip {
      background: rgba(51, 118, 246, 1);
      border-radius: 0.12rem;
      position: absolute;
      left: 0;
      top: 0;
      font-size: 0.56rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 0.56rem;
      padding: 0.15rem 0.2rem;
    }
  }

  .item-detail {
    width: calc(100% - 3.84rem);
    position: relative;
    display: flex;
    justify-content: space-between;

    .left {
      max-width: 70%;

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
    }

    .type {
      color: rgba(153, 153, 153, 1);
      margin-top: 0.5rem;
    }

    .price_number {
      text-align: right;
      line-height: 0.8rem;
      // .price {
      // }
      .number {
        color: #999999;
      }
    }
  }
}
</style>
